import React, { useEffect, useState } from 'react'
import { Box } from '$components';
import ReactEcharts from 'echarts-for-react';
import './style.less';
import { useFsRequest } from '$utils';
import { mathRound } from './util';
import NoData from './public/noData';
function DataTop5(props) {
    const { cardContentHeight } = props;
    const { data: dataTotal = {} } = useFsRequest({
        url: 'homepage/datatotal/top5',
        pollingInterval: 1000 * 60,
        cacheKey: 'datatotal',
    });

    const renderBody = () => {
        let chartData = dataTotal?.top5?.map(x => {
            return {
                name: x?.dataSource?.resourceCatalog?.name,
                value: mathRound(x.dbRecordCount),
            }
        }) || []

        let options = {
            xAxis: {
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitArea: { show: false },
                axisLine: {
                    show: false,
                },
            },
            tooltip: {
                confine: true,
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
                backgroundColor: 'rgba(13,30,44, 0.7)',
                borderColor: 'rgba(3, 65, 118, 0.8)',
                textStyle: {
                    color: '#fff',
                },
                formatter: function (params) {
                    var name = params[0].name
                    if (name.length > 20) {
                        name = name.replace(/(.{20})/g, '$1<br>') // 每 30 个字符添加一个换行符
                    }
                    var content = name

                    return content + '   :    <b>' + params[0].value + '</b>万条'
                }
            },
            grid: {
                top: 13,
                bottom: -10,
                left: '5%',
            },
            yAxis: {
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        padding: [-5, 0, 35, 18],
                    },
                    formatter(value, index) {
                        let str = '', num = 'TOP' + (index + 1)
                        let valueHandle = value.length > 10 ? value.substring(0, 10) + '...' : value
                        if (index === 0) {
                            str = '{a| ' + num + '}{title| ' + valueHandle + '}'
                        } else if (index === 1) {
                            str = '{b| ' + num + '}{title| ' + valueHandle + '}'
                        } else if (index === 2) {
                            str = '{c| ' + num + '}{title| ' + valueHandle + '}'
                        } else {
                            str = '{d| ' + num + '}{title| ' + valueHandle + '}'
                        }
                        return str
                    },
                    rich: {
                        a: {
                            borderColor: '#EE6F7C',
                            borderWidth: 1,
                            borderRadius: [0, 10, 10, 0],
                            padding: [3.5, 10, 1, -13],
                            backgroundColor: 'rgba(238, 111, 124, 0.8)',
                        },
                        b: {
                            borderColor: '#FFCF5F',
                            borderWidth: 1,
                            borderRadius: [0, 10, 10, 0],
                            padding: [3.5, 10, 1, -13],
                            backgroundColor: 'rgba(255, 207, 95, 0.7)',
                        },
                        c: {
                            borderColor: '#00E8FF',
                            borderWidth: 1,
                            borderRadius: [0, 10, 10, 0],
                            padding: [3.5, 10, 1, -13],
                            backgroundColor: 'rgba(0, 232, 255, 0.7)',
                        },
                        d: {
                            borderColor: '#1A90FF',
                            borderWidth: 1,
                            borderRadius: [0, 10, 10, 0],
                            padding: [3.5, 10, 1, -13],
                            backgroundColor: 'rgba(26, 144, 255, 0.7)',
                        },
                        title: {
                            padding: [0, 0, 0, 3],
                        },
                    },
                    align: 'left',
                },
                data: chartData.map((item) => item.name),
            },
            series: [
                {
                    type: 'pictorialBar',
                    symbol: 'rect',
                    symbolRotate: 30,
                    symbolRepeat: 'fixed',
                    symbolClip: true,
                    symbolOffset: [0, -1.5],
                    symbolSize: [2, 12],
                    symbolMargin: '3',
                    itemStyle: {
                        normal: {
                            color: '#000726',
                        },
                    },
                    label: {
                        show: true,
                        color: '#C8F0FF',
                        fontFamily: 'Bebas',
                        fontSize: 12,
                        offset: [-9, 1],
                        position: 'right',
                        formatter(params) {
                            let result = ''
                            switch (params.dataIndex) {
                                case 0:
                                    result = '{img|}{index0|' + params.value + '}{unit|}'
                                    break
                                case 1:
                                    result = '{img|}{index1|' + params.value + '}{unit|}'
                                    break
                                case 2:
                                    result = '{img|}{index2|' + params.value + '}{unit|}'
                                    break
                                default:
                                    result = '{img|}{index3|' + params.value + '}{unit|}'
                                    break
                            }
                            return result
                        },
                        rich: {
                            img: {
                                height: 18,
                                width: 20,
                                // backgroundColor: { image: arrow },这个图片自己切，这里上传不了（加了一个尾巴的形状）
                            },
                            unit: {
                                color: '#C8F0FF',
                                fontSize: 11,
                            },
                            index0: {
                                color: '#FFF',
                                fontFamily: 'Bebas',
                                padding: [-2, 2, 0, 0],
                                fontWeight: 'bold',
                                fontSize: 16,
                            },
                            index1: {
                                color: '#FFF',
                                fontFamily: 'Bebas',
                                padding: [-2, 2, 0, 0],
                                fontWeight: 'bold',
                                fontSize: 16,
                            },
                            index2: {
                                color: '#FFF',
                                fontFamily: 'Bebas',
                                padding: [-2, 2, 0, 0],
                                fontWeight: 'bold',
                                fontSize: 16,
                            },
                            index3: {
                                color: '#FFF',
                                fontFamily: 'Bebas',
                                padding: [-2, 2, 0, 0],
                                fontWeight: 'bold',
                                fontSize: 16,
                            },
                        },
                    },
                    symbolBoundingData: Math.max(...chartData.map((item) => item.value)) * 1.3,
                    data: chartData.map((item) => item.value),
                    z: 2,
                },
                {
                    type: 'bar',
                    barWidth: 10,
                    data: chartData.map((item) => item.value),
                    itemStyle: {
                        normal: {
                            color: '#54DEFA',
                        },
                    },
                    z: 1,
                },
                {
                    type: 'bar',
                    barGap: '-125%', // 设置外框粗细
                    data: chartData.map((items) => Math.max(...chartData.map((item) => item.value)) * 1.3),
                    barWidth: 15,
                    itemStyle: {
                        color: 'none',
                        borderColor: '#979797',
                    },
                    z: 0,
                },
            ],
        };

        return <ReactEcharts
            option={options}
            notMerge
            lazyUpdate
            style={{ height: cardContentHeight }}
        />
    }

    return <Box title={"数据量TOP5单位"} bodyPaddingTop={1} >
        {
            dataTotal?.top5?.length > 0 ?
                <>
                    <div className='data_top5_unit'>数据量：万条</div>
                    {renderBody()}
                </>
                : <NoData />
        }

    </Box>
}

export default DataTop5;


